import { Component, OnInit,Input,Output,EventEmitter} from '@angular/core';
import { JsonApiService } from "app/core/api/json-api.service"; //http请求配置引入
import {config} from '../smartadmin.config';
declare var $: any;
declare var BMap: any;
@Component({
  	selector: 'car-trees',
  	templateUrl: './carTrees.component.html',
  	styleUrls:['./carTrees.css'],
})
export class CarTreesComponent implements OnInit{
	@Input() height: any;
	@Output() private outerSend = new EventEmitter();
	constructor(private jsonApiService: JsonApiService) {}
	carTreeData:any=[];
	treeStatus='展开';
	notOnlineCar=false;
	findCarCount = 0; //车辆树搜出的总数
	findCarIndex = 0; //车辆树当前定位
	findString = ''; //搜索提示
	queryString = '';
	slectedCarId = '';	//选中车辆样式ID
	
	//将数据传递到父组件
	sendParent(data){
        this.outerSend.emit(data);
    }
 	ngOnInit(){
 		if(this.height){
 			$('.treeBody').height(this.height);
 		}
		this.initCarTreeData();
		
 	}
 	//选中车辆,获取信息返回到父组件
  	slectedCar(company,data){
  		$('.boldFont').removeClass('boldFont');
  		this.slectedCarId = data.id;
  		let carMess = {
  			carNumber:data.text,
  			deviceId:data.id,
  			companyName:company.text,
  			companyId:company.id,
  		}
  		this.sendParent(carMess)
  		
  	}
  	initItemIsshow(item){
  		for (let itemChild of item.childCompanyJSTreeList){
  			itemChild.isShow = true;
			itemChild.state.opened = false;
			if(itemChild.childCompanyJSTreeList.length > 0){
				itemChild.state.opened = true;
				this.initItemIsshow(itemChild);
			}
		}
  	}
  	
 	//初始化获取所有车辆数据
	initCarTreeData(){
	    this.jsonApiService.http("company/companycartree1.html", '').subscribe(result => {
			for (let item of result){
				//打开一级公司下面的车辆
				item.isShow = true;
				item.state.opened = false;
				if(item.childCompanyJSTreeList.length > 0){
					item.state.opened = true;
					this.initItemIsshow(item)
				}
			}
			this.carTreeData = result;
			$(document).keyup(function(event){
				var isFocus = $("#testSeach").is(":focus"); 
				if(isFocus){
					if(event.keyCode == 13){
						this.treeQueryEvent();
					}
				}
			}.bind(this));
		})
	}
	//定位上一个查询的车辆所在树形图的位置
	positionPrev() {
		if(this.findCarCount < 1) {
			return
		};
		this.findCarIndex--;
		if(this.findCarIndex < 0) {
			this.findCarIndex = 0;
			this.jsonApiService.message('已是第一个...');
			return;
		}
		this.findString = this.treePositionItem(this.findCarIndex);
	}
	//定位下一个查询的车辆所在树形图的位置
	positionNext() {
		if(this.findCarCount < 1) return;
		this.findCarIndex++;
		if(this.findCarIndex > this.findCarCount - 1) {
			this.findCarIndex = this.findCarCount - 1;
			this.jsonApiService.message('已是最后一个...');
			return;
		}
		this.findString = this.treePositionItem(this.findCarIndex);
	}
	//定位指定车辆所在树形图的位置
	treePositionItem (index){
		let findString = index+1+'/'+this.findCarCount;
		let container = $('.treeBody');
		let _this = $('.treeBody').find('.searchPosition').eq(index);
		$('.boldFont').removeClass('boldFont');
		_this.addClass('boldFont');
		let top = _this.offset().top - container.offset().top + container.scrollTop();
		container.animate({scrollTop: top - 100});
		return findString;
	}
  	ngOnChanges() {}
  	
	//展开,收起按钮事件
	openMyTree(){
		this.notOnlineCar = false;
		if(this.treeStatus == '全部'){
			this.treeStatus = '收起';
			this.openAllcar();
		}else{
			if(this.treeStatus == '收起'){
			this.treeStatus = '展开';
			for (let item of this.carTreeData){
				this.openOrCloseCompanyItem(item,false)
			}
			}else{
				this.treeStatus = '收起';
				for (let item of this.carTreeData){
					this.openOrCloseCompanyItem(item,true)
				}
			}
		}
	}
	//公司为一级,设置公司及车辆的展开收起
	openOrCloseCompanyItem(item,status){
		item.state.opened = status;
		if(!status){
			if(item.childCompanyJSTreeList.length>0){
				item.state.opened = true;
			}
		}
		for(let car of item.carJSTreeList){
			car.state.opened = status;
		}
		for(let nexCompany of item.childCompanyJSTreeList){
			nexCompany.state.opened = status;
			this.openOrCloseCompanyItem(nexCompany,status);
			for(let nexCpCar of nexCompany.carJSTreeList){
				nexCpCar.state.opened = status;
			}
		}
	}
	//展开所有的车辆事件
  	openAllcar(){
  		for (let item of this.carTreeData){
			this.openItmeCar(item);
			
		}
  	}
  	//公司为一级,展开对应的车辆
  	openItmeCar(param){
  		param.isShow = true;
  		for (let iem of param.childCompanyJSTreeList){
			this.openItmeCar(iem);
		}
  		for(let item of param.carJSTreeList){
  			item.state.opened = true;
			param.state.opened = true;
  		}
  	}
  	//展开公司下的车辆
  	openCarlist(param){
  		if(param.state.opened){
			param.state.opened = false;
		}
		else{
			param.state.opened = true;
		}
  		for (let item of param.carJSTreeList){
  			item.state.opened = true;
  			
  		}
  	}
  	//展开在线车辆
  	onlineCar(){
  		this.notOnlineCar = true;
  		this.treeStatus = '全部';
		for (let item of this.carTreeData){
			this.findItmeOnline(item);
		}
  	}
  	
  	//查询一个公司下的在线车辆
  	findItmeOnline(param){
  		if(param.childCompanyJSTreeList.length > 0){
  			param.isShow = true;
  			param.state.opened = true;
  			for (let iem of param.childCompanyJSTreeList){
				iem.isShow = true;
				iem.state.opened = true;
				this.findItmeOnline(iem);
			}
  		}
  		if(param.carJSTreeList.length > 0){
  			for(let item of param.carJSTreeList){
	  			if(item.icon == 'fa fa-car offline'){
	  				item.state.opened = false;
	  				param.isShow = false;
	  			}else{
	  				item.state.opened = true;
	  				param.state.opened = true;
	  				param.isShow = true;
	  				this.notOnlineCar = false;
	  			}
	  		}
  		}
  		
  	}
  	clearSearchval(){
  		$('.boldFont').removeClass('boldFont');
		$('.searchPosition').removeClass('searchPosition');
  		this.findString = '';
  		$('#testSeach').val('');
  		this.findCarCount = 0;
  		
  	}
  	//树形图查询事件
	treeQueryEvent() {
		$('.boldFont').removeClass('boldFont');
		$('.searchPosition').removeClass('searchPosition');
		this.findCarIndex = 0;
		this.queryString = common.stringTrim($('#testSeach').val());
		if(this.queryString == '') {
			this.findString = '';
			this.jsonApiService.message('请输入需要搜索的关键字...');
			return;
		}
		if(this.treeStatus) {
			for(let item of this.carTreeData){
				this.findQueryItemCar(item);
			}
			
			var that = this;
			setTimeout(function() {
				let findnum = 0;
				$('.getSeach').each(function(index,obj){
					let  valStar = common.stringTrim($(this).text());
					if(valStar!==''&&valStar.match(that.queryString+".*")){
						$(this).addClass('searchPosition');
						findnum++;
					}
				})
				that.findCarCount = findnum;
				if(that.findCarCount < 1){
					that.jsonApiService.message('未查询到数据...');
					that.findString = '';
					return;
				}
				that.jsonApiService.message('查询出'+that.findCarCount+'条数据...');
				that.findString = that.treePositionItem(that.findCarIndex);
			}, 100)
		}
	}
	
	//搜索一个公司下的被查询的车辆
	findQueryItemCar(param){
		let isQuery = false;
		let queryString = this.queryString;
		for(let itm of param.childCompanyJSTreeList){
			this.findQueryItemCar(itm);
		}
		for (let item of param.carJSTreeList){
			let  valStar=common.stringTrim(item.text);
			if(valStar!==''&&valStar.match(queryString+".*")){
				param.isShow = true;
				param.state.opened = true;
				item.state.opened = true;
			}
		}
	}
	draggingEvent(){
		var clickX;
		var warp = $("#wrap");
		var treeElement = $(".divTree").parent().parent();
		var treeRight = $(".treeRight");
		var min = 300;
		var max = 0;
		var leftOffset = warp.offset().left;
		$(document).on('mousemove', function(e) {
			var wrapWidth = warp.width();
			max = wrapWidth/2;
			var divTreeWidth = treeElement.width();
			var treeRightWidth = treeRight.width();
			clickX = e.pageX;
			//clickX-leftOffset > min   鼠标往右移动,并且大于最小宽度300
			if(clickX-leftOffset > min) {
				if(clickX -leftOffset < max) {
					treeElement.width(clickX - leftOffset + 'px');
					treeRight.width(wrapWidth - clickX + leftOffset -28 + 'px');
				}
				else{
					treeElement.width( max + 'px');
					treeRight.width(wrapWidth - max -28 + 'px');
				}
			} else {
				treeElement.width(min + 'px');
				treeRight.width(wrapWidth - min-28 + 'px');
			}
		});
		
		$(document).mouseup(function(e) {
			e.cancelBubble = true;
			$(document).unbind('mousemove')
		})
	}
}